body {
        background-color: #0FC2C0; /* Change the background color*/
}

p {
        font-family: Baskerville; /* Not working for some reason*/
}

.button {
        background-color: lightskyblue;
        border: black;
        color: lightseagreen;
        padding: 10px 20px; 
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        border-radius: 5px;
}

button:hover {
        background-color: lightblue;
        color: #D989BD;

}

#Page three {
        background-color: lightgreen; 
}

.container {
        column-width: 250px;
        column-gap: 20px;
}
.card {
        break-inside: avoid;
        background-color: rgba(0, 0, 0, 0);
        border: 2px solid rgb(255, 255, 255);
        padding: 10px;
        margin: 0 0 1em 0;
      }

#special-page {
        background-color: lightgreen; 
 
    
      p,
      ul {
        border: 2px solid rebeccapurple;
        padding: .5em;
      }
      
      .block,
      li {
        border: 2px solid blue;
        padding: .5em;
      }
      
      ul {
        display: flex;
        list-style: none;
      }
      
      .block {
        display: block;
      }
}

.text-box {
        border: 2px solid #0eb0cc;  
        background-color: #ffffff; 
        padding: 20px; 
        margin: 15px;
        border-radius: 8px;  
        box-shadow: 5px 5px 10px rgba(0,0,0,0.2); 
    }

.contact-page {
        background-image: linear-gradient(to bottom, #D989BD 20%, #BF39B6 40%, #692273 60%, #371640 80%, #0D208C 100%);
        height: 100vh; /* Make background cover entire viewport */
      }

.text-box {
        width: 300px;         
        padding: 20px;        
        border: 2px solid blue;  
        margin: 20px auto;    
        background-color: #f0f0f0; 
        border-radius: 5px;   
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); 
      }

.custom-button {
        display: inline-block;
        padding: 15px 25px;
        background-color: #D989BD; /* Pink color */
        color: white;
        text-decoration: none;  /* Remove underline */
        border: none;          
        border-radius: 4px;   
        cursor: pointer;       
        font-size: 16px;
      }
      
      .image-text-box {
        display: flex; 
        align-items: center; 
        border: 1px solid #ccc; 
        color:antiquewhite;
        padding: 20px; 
        margin-bottom: 20px; /* Space between boxes */
      }
      
      .image-text-box img {
        max-width: 150px; /* Adjust image size as needed */
        margin-right: 15px; /* Add spacing between image and text */
      }
      
      .text-content {
        flex: 1; 
      }
      
      .heading-box {
        border: 5px ridge #BDBFBF; 
        padding: 8px; 
        margin-bottom: 5px; 
        color:aliceblue;
        text-align: center;     
        border-radius: 8px;
        background: linear-gradient(to right, #BDBFBF, #07070D); 

        box-shadow: 
        0 0 10px rgba(255, 255, 255, 0.5), /* Inner white glow */
        0 0 100px rgba(0, 0, 255, 0.3); /* Outer blue glow */
      }

      header {
        background-color: #f0f0f0; 
        padding: 20px;
        text-align: center;
        border-bottom: 2px solid #ccc;
      }
      
            
     
      nav ul {

        list-style: none;
        margin: 0;
        padding: 0;
      }
      
      nav li {

        display: inline; /* Links side by side */
        margin: 0 10px; /* Spacing between links */
      }
      
      nav a {
        text-decoration: none;
        color: #333; 
        display: inline-block; /* Important for padding to work */
        padding: 8px;       
        background-color: #BDBFBF;
        border-radius: 50%;
        text-decoration: none;
        color: linear-gradient(to right, #07070D, #BDBFBF)
      }
      nav a:hover {
        color: white;
        background-color: #8B8C8C; 
    }

    .image-box {
        width: 400px;      /* Adjust width of the box */
        height: 400px;     /* Adjust height of the box */
        border: 2px groove #333;  /* Example border */
        margin: 20px auto;       /* Centers the box */
        padding: 15px;           /* Adds space around the image inside the box */ 
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* Optional: adds a shadow */
    }
    
    .image-box img {
        max-width: 100%;       
        height: auto;          
        display: block;        /* Prevents extra space below the image */
        border-radius: 10px;   
    }

.responsive-image {
        max-width: 100%;   
        height: auto;      
     }

     .container-2 {
        column-width: 250px;
        column-gap: 50px;
    
    
    
    }

    .card {
        break-inside: avoid;
        background-color: rgba(0, 0, 0, 0);
        border: 10px double #D90B1C;
        padding: 10px;
        margin: 0 0 1em 0;
        color: #8B8C8C;
      }
    
      h1 {
        font-size: 4em;
        background: linear-gradient(-45deg, #D989BD, #BF39B6, #692273, #0D208C);
        background-size: 400%; 
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
      
        animation: shimmer 3s infinite linear; 
      }
      
      @keyframes shimmer {
        0% { background-position: 0%; }
        100% { background-position: 100%; }
      }

      .loader {
        border: 10px solid #f3f3f3; 
        border-top: 10px solid #3498db; 
        border-radius: 50%;
        width: 100px;
        height: 100px;
        animation: spin 1s linear infinite; 
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }

      .container { 
        position: relative; 
       }
       .text-element {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
       }

      
      .container-9 {
        display: flex;
        flex-direction: column;  
        align-items: center;      
        min-height: 100vh;        
      }
    
      img {
        margin: 20px auto;        
      }
      
      body {
        background-color: rgb(0, 0, 0); 
      }
      
      .container-9 {
        display: flex;
        flex-direction: column;  
        align-items: center;     
        justify-content: center; 
        min-height: 20vh;       
      }
      
      @keyframes color-cycle {
        0% { color: red; }
        50% { color: blue; }
        100% { color: green; }
      }
      
      @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
      
      .loading-bar {
        width: 80%;
        height: 30px;
        margin: 30px auto; /* For basic centering */
        background: linear-gradient(-45deg, #BF39B6 25%, #692273 50%, #0D208C 75%);
        background-size: 400%; 
        animation: shimmer 2s linear infinite;
      }
      
      @keyframes shimmer {
        0% { background-position: 0%; }
        100% { background-position: 100%; }
      }

      .section { /* Styles for your container section (optional) */
        text-align: center;
      }
      
      .bounce-in {
        opacity: 0;             /* Initially hidden */
        transform: translateY(30px); /* Start below its intended position */
        animation: bounceIn 1s ease-out forwards; 
        animation-delay: 0.5s;   /* Adjust the delay as needed */
        background: linear-gradient(-45deg, #BF39B6 25%, #692273 50%, #0D208C 75%);
      }
      
      @keyframes bounceIn {
        0% { opacity: 0; transform: translateY(30px); }
        50% { transform: translateY(-10px); } 
        100% { opacity: 1; transform: translateY(0); }
      }
      
      nav {
        text-align: center; 
      }
      
img {
  transition: all 0.3s ease-in-out; /* Smooth transition */
}

img:hover {
  transform: scale(1.1);  /* Zoom slightly on hover */
  opacity: 0.8;           /* Slightly fade on hover */
  filter: grayscale(50%); /* Or another filter */
}